<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div id="electric"></div>
</template>
  
  <script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";

onMounted(() => {
  var chartDom = document.getElementById("electric");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: [
      {
        top: "5.5%",
        left: "60%",
        textStyle: {
          color: "#fff",
          fontSize: 20,
          fontFamily: "微软雅黑",
        },
        itemWidth: 20,
        itemHeight: 20,
        data: [
          {
            name: "1",
            icon: "rect",
          },
        ],
      },
      {
        data: [
          {
            name: "2",
            icon: "rect",
          },
        ],
        itemWidth: 30,
        itemHeight: 2,
        top: "6%",
        left: "40%",
        textStyle: {
          color: "#fff",
          // fontWeight: "normal",
          fontSize: 20,
        },
      },
    ],
    grid: {
      top: "4%",
      left: "9%",
      right: "4%",
      bottom: "22%",
    },

    xAxis: {
      type: "category",
      data: [5, 10, 15, 20, 25, 30],
      axisLabel: {
        color: "#CFCFCF",
        interval: 0,
        fontSize: 12,
        formatter: "{value}日",
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "value",
        min: 0,
        nameTextStyle: {
          color: "#fff",
          fontSize: 22,
        },
        axisLine: {
          lineStyle: {
            color: "#0a3e98",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#0a3e98",
            type: "dotted",
          },
        },
        axisLabel: {
          formatter: "{value}万",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
      },
      {
        type: "value",
        min: 0,
        nameTextStyle: {
          color: "#fff",
          fontSize: 22,
        },
        axisLine: {
          lineStyle: {
            color: "#0a3e98",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#0a3e98",
            type: "dotted",
          },
        },
        axisLabel: {
          formatter: "{value}万",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
      },
    ],
    series: [
      {
        type: "pictorialBar",
        symbolSize: [20, 10],
        symbolOffset: [0, -6],
        symbolPosition: "end",
        z: 12,
        // "barWidth": "0",
        tooltip: {
          show: false,
        },
        itemStyle: {
          color: "#f90", // 设置所有柱子的颜色为黄色
        },
        color: "#008ed7",
        data: [14, 24, 28, 32, 22, 37],
      },
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [20, 10],
        symbolOffset: [0, 7],
        // "barWidth": "20",
        z: 12,
        tooltip: {
          show: false,
        },
        color: "yellow",
        data: [14, 24, 28, 32, 22, 37],
      },
      {
        type: "bar",
        //silent: true,
        barWidth: "20",
        barGap: "10%", // Make series be overlap
        barCateGoryGap: "10%",
        itemStyle: {
          normal: {
            color:"yellow",
            opacity: 1,
          },
        },
        data: [14, 24, 28, 32, 22, 37],
      },
      {
        type: "line",
        yAxisIndex: 1,
        // symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        smooth: true,
        symbolSize: 0,
        lineStyle: {
          normal: {
            width: 8,
            color: "#29a5d5", // 线条颜色
          },
        },
        itemStyle: {
          normal: {
            color: "#071c33", //拐点颜色
            borderColor: "#2db6e9", //拐点边框颜色
            borderWidth: 2, //拐点边框大小
            // label: {
            //    show: true, //开启显示
            //    color: '#fff',
            //    position: 'top', //在上方显示
            //    formatter: function (res) {
            //       if (res.value) {
            //          return res.value
            //       } else {
            //          return 0
            //       }
            //    },
            // },
          },
        },
        // symbolSize: 8,   //设定实心点的大小
        areaStyle: {
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#29a5d530",
                },
                {
                  offset: 0.6,
                  color: "#29a5d520",
                },
                {
                  offset: 1,
                  color: "#29a5d510",
                },
              ],
              false
            ),
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
  //监听窗口变化
  window.addEventListener("resize", function () {
    console.log("监听窗口变化");
    myChart.resize();
  });
});
</script>
  
  <style scoped>
#electric {
  width: 100%;
  height: 100%;
}
</style>